<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部</title>
       <style>
      .navbar {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        background-color: #fff;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
      }

      .navbar-container {
        display: flex;
        justify-content: space-between; /* 保持原有元素间的间距 */
        /* justify-content: center; */
        align-items: center;
        width: 1053px;
        margin: 0 auto;
      }

      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
      }

      .navbar-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .navbar-menu li {
        margin: 0 20px;
      }

      .navbar-menu li a {
        position: relative;
        text-decoration: none;
        color: #000;
        font-size: large;
        font-weight: bold;
      }

      .navbar-menu li a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 2px;
        background-color: transparent;
        transition: background-color 0.3s;
      }

      .navbar-menu li a:hover::after,
      .navbar-menu li a.active::after {
        background-color: green;
      }

      .empty-box {
        width: 232px;
        height: 156px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .empty-box img {
        max-width: 245%;
        max-height: 73%;
        object-fit: contain;
      }

      .search-box {
        position: absolute;
        right: 0;
      }
      
      .search-box input[type="text"] {
        width: 200px;
        height: 30px;
        padding: 5px;
        border: none;
        border-radius: 5px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        margin-right: 10px;
      }

      .search-box button[type="submit"] {
        
        width: 80px;
        height: 30px;
        background-color: green;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
      }

      .search-box button[type="submit"]:hover {
        background-color: darkgreen;
      }
    </style>
</head>
<body>
     <!-- 头部 -->
        <nav class="navbar">
      <div class="navbar-container">
        <ul class="navbar-menu">
          <li><a href="#">农业资讯</a></li>
          <li><a href="#">政务公开</a></li>
          <li><a href="#">政务服务</a></li>
          <li class="empty-box"><img src="./images/title3.png" alt="" /></li>
          <li><a href="#">互动平台</a></li>
          <li><a href="#">数据发布</a></li>
          <li><a href="#">组织机构</a></li>

          <li class="search-box">
            <form>
              <input type="text" placeholder="搜索" />
<svg t="1699759805136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4291" width="26" height="26"><path d="M425.911504 851.823009C190.690549 851.823009 0 661.13246 0 425.911504S190.690549 0 425.911504 0s425.911504 190.690549 425.911505 425.911504-190.690549 425.911504-425.911505 425.911505z m0-72.495575c195.194336 0 353.415929-158.221593 353.41593-353.41593S621.105841 72.495575 425.911504 72.495575 72.495575 230.717168 72.495575 425.911504s158.221593 353.415929 353.415929 353.41593z" fill="#000000" p-id="4292"></path><path d="M697.769912 697.769912c15.514053-12.56892 38.286726-12.56892 54.371681 0l253.734513 253.734513c12.56892 16.084956 12.56892 38.857628 0 54.371681-15.514053 12.56892-38.286726 12.56892-54.371681 0L697.769912 752.141593c-12.56892-16.084956-12.56892-38.857628 0-54.371681z" fill="#000000" p-id="4293"></path></svg>    </nav>
 

</body>
</html>